class Pagination {
  constructor(ele, options) {
    if (!ele) {
      throw new Error("方法必须传递参数，第一个为dom元素，第二个为对象");
    }
    this.ele = ele;

    // 把用户传递进来的信息保存一下
    this.options = options || {};

    // 准备一些分页信息
    this.default = {
      pageInfo: {
        pagenum: 1,
        pagesize: 10,
        total: 1000,
        totalpage: 100, // 页码总数
      },
      textInfo: {
        first: "first",
        prev: "prev",
        list: "",
        next: "next",
        last: "last",
      },
    };

    // 当页码发生改变的时候就执行这个函数
    this.change = this.options.change || function () {};

    // 提前准备一个变量，保存 list 里面的元素
    this.list = null;

    // 调用过的入口函数
    this.init();
  }
  init() {
    this.setDefault();
    this.setStyle();
    this.dongcidaci();
  }
  // 使用用户传递的信息替换我自己的信息
  setDefault() {
    if (this.options.pageInfo) {
      for (let attr in this.options.pageInfo) {
        this.default.pageInfo[attr] = this.options.pageInfo[attr];
      }
    }

    if (this.options.textInfo) {
      for (let attr in this.options.textInfo) {
        this.default.textInfo[attr] = this.options.textInfo[attr];
      }
    }
  }
  // 给大盒子设置样式
  setStyle() {
    this.ele.innerHTML = "";
    setCss(this.ele, {
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      backgroundColor: "#fff",
      padding: "20px 0",
    });

    // 设置完样式就添加元素
    this.createEle();
    // 添加列表
    this.creteList();
    // 添加文本框
    this.go();
    // 禁用的判断
    this.isDis();

    // 动过以后要执行函数（如果第一次渲染分页的时候也需要执行change函数的时候 那么就在这里this.change）
    // this.change(this.default.pageInfo.pagenum);
  }
  // 添加上一页下一页首页末页列表标签到 this.ele 里面
  createEle() {
    for (let attr in this.default.textInfo) {
      const div = document.createElement("div");
      div.className = attr;
      if (attr === "list") {
        this.list = div;
        setCss(div, {
          border: "1px solid #e2e2e2",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
        });
      } else {
        //四个按钮
        setCss(div, {
          border: "1px solid #e2e2e2",
          outline: "none",
          width: "60px",
          height: "28px",
          lineHeight: "28px",
          textAlign: "center",
          cursor: "pointer",
          userSelect: "none",
          backgroundColor: "#fff",
          boxSizing: "border-box",
          color: "#333",
          fontSize: "12px",
        });
      }
      div.innerHTML = this.default.textInfo[attr];
      this.ele.appendChild(div);
    }

    this.ele.children[1].style.margin = "0 10px";
    this.ele.children[3].style.margin = "0 10px";
  }
  // 设置页码
  creteList() {
    const pagenum = this.default.pageInfo.pagenum;
    const totalpage = this.default.pageInfo.totalpage;

    if (totalpage <= 9) {
      // 小于九个直接渲染
      for (let i = 1; i <= this.default.pageInfo.totalpage; i++) {
        const p = this.crealeP(i);
        this.list.appendChild(p);
      }
    } else {
      // 大于九个分成几个步骤来渲染
      if (pagenum < 5) {
        // 1 2 3 4 5 ... 99 100
        for (let i = 1; i <= 5; i++) {
          this.list.appendChild(this.crealeP(i));
        }

        const span = document.createElement("span");
        span.innerHTML = "···";
        this.list.appendChild(span);
        setCss(span, {
          width: "26px",
          height: "26px",
          lineHeight: "26px",
          textAlign: "center",
          fontSize: "12px",
          borderRight: "1px solid #e2e2e2",
          cursor: "pointer",
          margin: "0px",
          userSelect: "none",
        });

        for (let i = totalpage - 1; i <= totalpage; i++) {
          this.list.appendChild(this.crealeP(i));
        }
      } else if (pagenum === 5) {
        // 1 2 3 4 5 6 7 ... 99 100
        for (let i = 1; i <= 7; i++) {
          this.list.appendChild(this.crealeP(i));
        }

        const span = document.createElement("span");
        span.innerHTML = "···";
        this.list.appendChild(span);
        setCss(span, {
          width: "26px",
          height: "26px",
          lineHeight: "26px",
          textAlign: "center",
          fontSize: "12px",
          borderRight: "1px solid #e2e2e2",
          cursor: "pointer",
          margin: "0px",
          userSelect: "none",
        });

        for (let i = totalpage - 1; i <= totalpage; i++) {
          this.list.appendChild(this.crealeP(i));
        }
      } else if (pagenum > 5 && pagenum < totalpage - 4) {
        for (let i = 1; i <= 2; i++) {
          this.list.appendChild(this.crealeP(i));
        }

        const span = document.createElement("span");
        span.innerHTML = "···";
        this.list.appendChild(span);
        setCss(span, {
          width: "26px",
          height: "26px",
          lineHeight: "26px",
          textAlign: "center",
          fontSize: "12px",
          borderRight: "1px solid #e2e2e2",
          cursor: "pointer",
          margin: "0px",
          userSelect: "none",
        });

        for (let i = pagenum - 2; i <= pagenum + 2; i++) {
          this.list.appendChild(this.crealeP(i));
        }

        const span2 = document.createElement("span");
        span2.innerHTML = "···";
        this.list.appendChild(span2);
        setCss(span2, {
          width: "26px",
          height: "26px",
          lineHeight: "26px",
          textAlign: "center",
          fontSize: "12px",
          borderRight: "1px solid #e2e2e2",
          cursor: "pointer",
          margin: "0px",
          userSelect: "none",
        });

        for (let i = totalpage - 1; i <= totalpage; i++) {
          this.list.appendChild(this.crealeP(i));
        }
      } else if (pagenum === totalpage - 4) {
        for (let i = 1; i <= 2; i++) {
          this.list.appendChild(this.crealeP(i));
        }

        const span = document.createElement("span");
        span.innerHTML = "···";
        this.list.appendChild(span);
        setCss(span, {
          width: "26px",
          height: "26px",
          lineHeight: "26px",
          textAlign: "center",
          fontSize: "12px",
          borderRight: "1px solid #e2e2e2",
          cursor: "pointer",
          margin: "0px",
          userSelect: "none",
        });

        for (let i = totalpage - 6; i <= totalpage; i++) {
          this.list.appendChild(this.crealeP(i));
        }
      } else if (pagenum > totalpage - 4) {
        for (let i = 1; i <= 2; i++) {
          this.list.appendChild(this.crealeP(i));
        }

        const span = document.createElement("span");
        span.innerHTML = "···";
        this.list.appendChild(span);
        setCss(span, {
          width: "26px",
          height: "26px",
          lineHeight: "26px",
          textAlign: "center",
          fontSize: "12px",
          borderRight: "1px solid #e2e2e2",
          cursor: "pointer",
          margin: "0px",
          userSelect: "none",
        });

        for (let i = totalpage - 4; i <= totalpage; i++) {
          this.list.appendChild(this.crealeP(i));
        }
      }
    }
    this.list.lastElementChild.style.borderRight = "0px";
  }
  // 提取了一个专门用来创建 li 的函数
  crealeP(i) {
    // i 形参就是要拿到循环中的 i 我好渲染文字
    // 和当前页面进行比较
    const p = document.createElement("p");

    p.innerHTML = i;
    setCss(p, {
      width: "26px",
      height: "26px",
      lineHeight: "26px",
      textAlign: "center",
      fontSize: "12px",
      borderRight: "1px solid #e2e2e2",
      cursor: "pointer",
      margin: "0px",
      userSelect: "none",
      boxSizing: "border-box",
    });

    if (i === this.default.pageInfo.pagenum) {
      setCss(p, {
        backgroundColor: "#1E9FFF",
        color: "#FFF",
      });
    }

    return p;
  }
  // 设置文本款和按钮
  go() {
    const inp = document.createElement("input");
    const btn = document.createElement("button");
    setCss(inp, {
      border: "1px solid #e2e2e2",
      backgroundColor: "#fff",
      outline: "none",
      margin: "0px",
      width: "40px",
      height: "26px",
      lineHeight: "22px",
      textAlign: "center",
      cursor: "pointer",
      userSelect: "none",
      padding: "0px",
      boxSizing: "border-box",
      fontSize: "12px",
      marginLeft: "20px",
      userSelect: "none",
    });
    inp.value = this.default.pageInfo.pagenum;
    inp.type = "text";
    inp.setAttribute(
      "oninput",
      "javascript:this.value=(/[0-9]*/.test(this.value))? 1 : this.value"
    );
    inp.setAttribute("pattern", "[0-9]*");
    inp.setAttribute("min", "1");
    inp.setAttribute("max", this.default.pageInfo.totalpage);
    setCss(btn, {
      border: "1px solid #e2e2e2",
      outline: "none",
      width: "40px",
      height: "26px",
      lineHeight: "26px",
      textAlign: "center",
      marginLeft: "5px",
      cursor: "pointer",
      userSelect: "none",
      borderRadius: "2px",
      backgroundColor: "#fff",
      boxSizing: "border-box",
      color: "#000",
      fontSize: "12px",
    });
    btn.innerHTML = "确定";
    this.ele.appendChild(inp);
    this.ele.appendChild(btn);

    let totalCount = document.createElement("span");
    totalCount.innerHTML = "共 " + this.default.pageInfo.total + " 条";
    setCss(totalCount, {
      fontSize: "12px",
      marginLeft: "5px",
      color: "#333",
      userSelect: "none",
    });
    this.ele.appendChild(totalCount);

    /* let size = [10, 20, 30, 40, 50];
    let select = document.createElement("select");
    for (let i = 0; i < size.length; i++) {
      let option = document.createElement("option");
      option.innerHTML = option.value = size[i];
      select.appendChild(option);
    }
    this.ele.appendChild(select);
    setCss(select, {
      border: "1px solid #e2e2e2",
      outline: "none",
      width: "40px",
      height: "26px",
      lineHeight: "26px",
      marginLeft: "5px",
      cursor: "pointer",
      userSelect: "none",
      borderRadius: "2px",
      backgroundColor: "#fff",
      boxSizing: "border-box",
      color: "#000",
      fontSize: "12px",
    });
    select.onchange = () => {
      this.options.pageInfo.pagesize = select.value;
      this.default.pageInfo.pagesize = select.value;
    }; */
  }
  // 判断一下禁用
  isDis() {
    if (this.default.pageInfo.pagenum === 1) {
      this.ele.children[0].style.color = "#d2d2d2";
      this.ele.children[1].style.color = "#d2d2d2";
    }

    if (this.default.pageInfo.pagenum === this.default.pageInfo.totalpage) {
      this.ele.children[3].style.color = "#d2d2d2";
      this.ele.children[4].style.color = "#d2d2d2";
    }
  }
  // 动起来
  dongcidaci() {
    // 事件委托来做
    this.ele.addEventListener("click", (e) => {
      e = e || window.event;
      const target = e.target;

      if (target.className === "first" && this.default.pageInfo.pagenum !== 1) {
        this.default.pageInfo.pagenum = 1;
        this.setStyle();
      }

      if (target.className === "prev" && this.default.pageInfo.pagenum !== 1) {
        this.default.pageInfo.pagenum--;
        this.setStyle();
      }

      if (
        target.className === "next" &&
        this.default.pageInfo.pagenum !== this.default.pageInfo.totalpage
      ) {
        this.default.pageInfo.pagenum++;
        this.setStyle();
      }

      if (
        target.className === "last" &&
        this.default.pageInfo.pagenum !== this.default.pageInfo.totalpage
      ) {
        this.default.pageInfo.pagenum = this.default.pageInfo.totalpage;
        this.setStyle();
      }

      if (
        target.nodeName === "P" &&
        target.innerHTML - 0 !== this.default.pageInfo.pagenum
      ) {
        this.default.pageInfo.pagenum = target.innerHTML - 0;
        this.setStyle();
      }

      if (
        target.nodeName === "BUTTON" &&
        target.previousElementSibling.value - 0 !==
          this.default.pageInfo.pagenum
      ) {
        this.default.pageInfo.pagenum = target.previousElementSibling.value - 0;
        this.setStyle();
      }

      // 如果一开始渲染的时候 不需要执行change函数的时候 在这个位置调用this.change函数
      this.change(this.default.pageInfo.pagenum);
    });
  }
}

function setCss(ele, options) {
  for (let attr in options) {
    ele.style[attr] = options[attr];
  }
}
